<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 信息登记/密接人员详情 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------编辑的tag---------------------------------- -->





<template>
    <div class="box">
      <div class="banner-box">
        <div class="crumbs-box">
          <div class="crumbs">信息登记/密接人员详情</div>
        </div>
        <!-- tag -->
        <div class="tag-box">
          <div class="tag" @click="EditBasicInformation">基本信息</div>
          <div class="tag" @click="DetailCondition">发病就诊情况</div>
          <div class="tag" @click="DetailDanger">危险因素与暴露史</div>
          <div class="tag" @click="DetailCheck">流行病学调查</div>
          <div class="tag" @click="DetailCloseConnection">密切接触者</div>
          <div class="tag" @click="DetailDamp">采样及检测情况</div>
          <div class="tag" @click="DetailAanayize">感染来源分析</div>
          <div class="tag" @click="DetailLog">数据日志</div>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  import { useRouter } from "vue-router";
  
  
  
  export default defineComponent({
    name: "ConfirmedCasesEdit ",
    setup(){
      const router = useRouter()
      // 路由跳转基本信息
      const EditBasicInformation = ()=>{
        router.push('/ConfirmedCasesDetail')
      }
      
      //路由跳转发病就诊情况
      const DetailCondition = ()=>{
        router.push('/DetailCondition')
      }
      const DetailDanger = ()=>{
        router.push('/DetailDanger')
      }
      const DetailCheck = ()=>{
        router.push('/DetailCheck')
      }
      const DetailCloseConnection = ()=>{
        router.push('/DetailCloseConnection')
      }
      const DetailDamp = ()=>{
        router.push('/DetailDamp')
      }
      const DetailAanayize = ()=>{
        router.push('/DetailAanayize')
      }
      const DetailLog = ()=>{
        router.push('/DetailLog')
      }
  
  
      return  {
        EditBasicInformation,
        DetailDanger,
        DetailCheck,
        DetailCloseConnection,
        DetailDamp,
        DetailLog,
        DetailAanayize,
        DetailCondition
      }
    }
  });
  </script>
  
  <style scoped>
  .crumbs {
    font-size: 15px;
    height: 60px;
    width: 100%;
  
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .box {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
    flex-direction: column;
    align-items: center;
  }
  .banner-box {
    width: 100%;
  }
  .crumbs-box {
    width: 100%;
  }
  
  /* tag标题 */
  .tag-box {
    display: flex;
    height: 40px;
    width: 70%;
  }
  .tag {
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 0 20px 0 0;
    font-size: 15px;
  }
  .tag:hover {
    cursor: pointer;
  }
  </style>